<!DOCTYPE html>
<html lang="">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {    margin: 0;padding: 0;}
	        html,body {    width: 100%;height: 100%;}
	        #box { width: 100%; height: 100%; overflow: hidden; }
	        .ball { width: 100%; height: 500px; }
	        #scroll {
	            width: 6px; height: 96%;
	            position: fixed; top: 2%; right: 5px;
	            border-radius: 3px; background-color: rgba(235, 233, 233, 0.5);
	            z-index: 9998; opacity: 100;
	        }
	        #scrollBar {
	            position: absolute; z-index: 9999;
	            width: 6px; height: 20px;
	            border-radius: 3px;
	            left: 0; top: 0; background-color: #383838;
	        }
		</style>
	</head>
	<body style="overflow: hidden;">
		<div id="box">
	        <div id="content">
	            <p class="ball" style="background-color:red;"></p>
	            <p class="ball" style="background-color:blue;"></p>
	            <p class="ball" style="background-color:yellow;"></p>
	            <p class="ball" style="background-color:red;"></p>
	            <p class="ball" style="background-color:blue;"></p>
	            <p class="ball" style="background-color:yellow;"></p>
	        </div>
	    </div>
	    <div id="scroll">
	        <div id="scrollBar"></div>
   		 </div>
	</body>
</html>
	<script src="base.js" type="text/javascript" charset="UTF-8"></script>
	<script type="text/javascript">
		var content=document.getElementById("content")
		var box=document.getElementById("box")
		var scroll=document.getElementById("scroll")
		var scrollBar=document.getElementById("scrollBar")
		
		window.onresize=function(){
			init()
		}
		function init(){
			scrollBar.style.height=scroll.offsetHeight*window.innerHeight/content.offsetHeight+"px"
			window.scale=box.offsetHeight/scrollBar.offsetHeight
			scrollBar.style.top=box.scrollTop/scale+"px"
		}
		init()
		
		addEvent(box,"mousewheel",function(e){
			var e=e||event
			if(e.wheelDelta<0){
				box.scrollTop+=20;
			}else{
				box.scrollTop-=20
			}
			console.log(123)
			scrollBar.style.top=box.scrollTop/scale+"px"
		})
		addEvent(box,"DOMMouseScroll",function(e){
			var e=e||event
			if(e.detail>0){
				box.scrollTop+=20;
			}else{
				box.scrollTop-=20
			}
			scrollBar.style.top=box.scrollTop/scale+"px"
		})
		scrollBar.onmousedown=function(e){
			var e=e||event
			var [mouseX,mouseY]=[e.offsetX,e.offsetY]
			document.onmousemove=function(e){
				var e=e||event
				scrollBar.style.top=Math.min(scroll.offsetHeight-scrollBar.offsetHeight,Math.max(0,e.clientY-mouseY-scroll.offsetTop))+"px"
				box.scrollTop=scrollBar.offsetTop*scale;
			}
			e.stopPropagation()
		}
		addEvent(document,"mouseup",function(){
			document.onmousemove=""
		})
		scroll.onclick=function(e){
			e=e||event
			//console.log(123)
			if(e.offsetY<scrollBar.offsetTop){
				scrollBar.style.top=Math.min(scroll.offsetHeight-scrollBar.offsetHeight,Math.max(0,scrollBar.offsetTop-scrollBar.offsetHeight))+"px"				
				box.scrollTop=scrollBar.offsetTop*scale;
			}else if(e.offsetY>scrollBar.offsetTop+scrollBar.offsetHeight){
				scrollBar.style.top=Math.min(scroll.offsetHeight-scrollBar.offsetHeight,Math.max(0,scrollBar.offsetTop+scrollBar.offsetHeight))+"px"				
				box.scrollTop=scrollBar.offsetTop*scale;
			}
		}
	</script>
